<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>菜单管理</span>
      </div>
      <div class="text item">
        <!-- 工具栏 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-if="checkPermission(['system:menu:add'])"
              type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <!-- 表格区域 -->
        <el-table
          v-loading="loading"
          :data="menuList"
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          border>
          <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="100">
            <template slot-scope="scope">
              <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon"/>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="60" align="center"></el-table-column>
          <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="visible" label="可见" width="80" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.visible === 1 ? 'success' : 'info'">
                {{ scope.row.visible === 1 ? '显示' : '隐藏' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button v-if="checkPermission(['system:menu:edit'])"
                size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button v-if="checkPermission(['system:menu:delete'])"
                size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="上级菜单">
          <el-tree-select
            v-model="form.parentId"
            :data="menuOptions"
            :props="{ label: 'name', value: 'id' }"
            placeholder="请选择上级菜单"
            clearable>
          </el-tree-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon" placeholder="请输入图标名称">
            <template slot="append">
              <el-button icon="el-icon-search" @click="showIconSelect">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="权限标识" prop="permission">
          <el-input v-model="form.permission" placeholder="请输入权限标识"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="form.component" placeholder="请输入组件路径"></el-input>
        </el-form-item>
        <el-form-item label="是否可见">
          <el-radio-group v-model="form.visible">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 菜单表格数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      dialogTitle: '',
      // 弹出层是否显示
      dialogVisible: false,
      // 表单参数
      form: {
        id: undefined,
        parentId: 0,
        name: undefined,
        icon: undefined,
        sort: 0,
        permission: undefined,
        component: undefined,
        visible: 1
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    checkPermission(permissions) {
      // TODO: 实现权限检查
      return true
    },
    async getList() {
      this.loading = true
      try {
        // TODO: 调用菜单列表API
        // 模拟数据
        this.menuList = [
          {
            id: 1,
            name: '系统管理',
            icon: 'system',
            sort: 1,
            permission: '',
            component: '',
            visible: 1,
            children: [
              {
                id: 2,
                name: '用户管理',
                icon: 'user',
                sort: 1,
                permission: 'system:user:list',
                component: 'system/user/index',
                visible: 1
              }
            ]
          }
        ]
        this.menuOptions = [...this.menuList]
        this.loading = false
      } catch (error) {
        this.loading = false
        console.error('获取菜单列表失败:', error)
      }
    },
    handleAdd() {
      this.dialogTitle = '添加菜单'
      this.form = {
        id: undefined,
        parentId: 0,
        name: undefined,
        icon: undefined,
        sort: 0,
        permission: undefined,
        component: undefined,
        visible: 1
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑菜单'
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除该菜单吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除API
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {})
    },
    showIconSelect() {
      // TODO: 实现图标选择
      this.$message.info('图标选择功能待实现')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // TODO: 调用保存API
          this.$message.success(this.form.id ? '修改成功' : '新增成功')
          this.dialogVisible = false
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.mb8 {
  margin-bottom: 8px;
}
</style> 